<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <div>
        <!-- watcher是创建了，但是是绑定在obj上面的，因为data里面只对obj进行响应式-->
        <p>{{obj.name}}</p>
    </div>

    <button @click="action()">点击</button>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        methods: {
            action() {
                this.obj.name = 'ssx';//无效
                this.$set(this.obj, 'name', 'ssx');//无效
                this.$forceUpdate();//有效
            }
        },
        data: {
            obj: {},//响应式只到obj这个层级，并没有到name
        }
    });
</script>


</body>
</html>
